<template>
  <d2-container>
    <template slot="header">
      <el-form :inline="true" :model="searchForm" ref="searchForm" size="mini" style="margin-bottom: -18px;">
        <el-form-item label="用户名" prop="code">
          <el-input v-model="searchForm.code" placeholder="用户名" style="width: 100px;" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="searchForm.name" placeholder="姓名" style="width: 120px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearchFormSubmit">
            <d2-icon name="search" /> 查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSearchFormReset">
            <d2-icon name="refresh" /> 重置
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <div style="height: 450px;">
      <SplitPane :default-percent='20' split="vertical">
        <template slot="paneL" :style="{height: '100%' }">
          <org-tree @node-click="nodeClick" /></template>
        <template slot="paneR">
          <div style="margin: 10px;height:400px">
            <d2-crud ref="d2Crud" :columns="columns" :data="data" :options="options" :form-options="formOptions"
              :add-template="template" :edit-template="template" :add-rules="rules" :edit-rules="rules"
              @selection-change="handleSelectionChange" @dialog-cancel="handleDialogCancel" @row-add="handleRowAdd"
              @row-edit="handleRowEdit" selection-row>
              <el-button slot="header" style="margin-bottom: 5px" type="primary" size="mini" icon="el-icon-circle-plus"
                @click="add">
                新增
              </el-button>
              <el-button slot="header" style="margin-bottom: 5px" size="mini" icon="el-icon-edit" @click="edit">
                修改
              </el-button>
              <el-button slot="header" style="margin-bottom: 5px" type="danger" size="mini" icon="el-icon-delete"
                @click="batchDelete">
                删除
              </el-button>
                <el-button slot="header" style="margin-bottom: 5px" size='mini' @click="handleUserRole">
                设置角色
                </el-button>
            </d2-crud>
          </div>
          <page ref="pagination" @change="fetchData()" slot="footer" />
          <user-role ref="userRole" />
        </template>

      </SplitPane>

    </div>

  </d2-container>
</template>

<script>
  import page from "@/pages/components/page";
  import crud from "@/pages/components/crud/crud";
  import defaultStyle from "@/pages/components/crud/defaultStyle";
  import config from "./config";
  import OrgTree from '@/pages/system/org/orgTree'
  import UserRole from './userRole'
  export default {
    data(){
      return{
        dialogVisible: false
      }
    },
    components: {
      page,
      OrgTree,
      UserRole
    },
    mixins: [crud, defaultStyle, config],
    methods: {
      nodeClick(data) {
        let param = null;
        if (data.pid) {
          param = {
            orgId: data.id
          }
        }
        this.fetchData(param);
      },
      handleUserRole(){
        this.selectionHandler(()=>{
          this.$refs.userRole.open(this.selection[0]);
        },'请选择一条记录设置角色');
      }
    }
  }
</script>
